<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap Min CSS -->
    <link rel="stylesheet" href="https://www.jq22.com/jquery/bootstrap-4.2.1.css">
    <!-- Owl Theme Default Min CSS -->
    <link rel="stylesheet" th:href="@{/css/owl.theme.default.min.css}">
    <!-- Owl Carousel Min CSS -->
    <link rel="stylesheet" th:href="@{/css/owl.carousel.min.css}">
    <!-- Animate Min CSS -->
    <link rel="stylesheet" th:href="@{/css/animate.min.css}">
    <!-- Boxicons Min CSS -->
    <link rel="stylesheet" th:href="@{/css/boxicons.min.css}">
    <!-- Magnific Popup Min CSS -->
    <link rel="stylesheet" th:href="@{/css/magnific-popup.min.css}">
    <!-- Flaticon CSS -->
    <link rel="stylesheet" th:href="@{/css/flaticon.css}">
    <!-- Meanmenu Min CSS -->
    <link rel="stylesheet" th:href="@{/css/meanmenu.min.css}">
    <!-- Nice Select Min CSS -->
    <link rel="stylesheet" th:href="@{/css/nice-select.min.css}">
    <!-- Odometer Min CSS-->
    <link rel="stylesheet" th:href="@{/css/odometer.min.css}">
    <!-- Date Picker CSS-->
    <link rel="stylesheet" th:href="@{/css/date-picker.min.css}">
    <!-- Muli Fonts Min CSS-->
    <link rel="stylesheet" th:href="@{/css/muli-fonts.css}">
    <!-- Style CSS -->
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <!-- Responsive CSS -->
    <link rel="stylesheet" th:href="@{/css/responsive.css}">

    <!-- Favicon -->
    <link rel="icon" type="image/png" th:href="@{/images/favicon.png}">
    <!-- Title -->
    <title>Jubi - Job Board</title>
</head>

<body>
<!-- Start Preloader Area -->
<div class="preloader">
    <div class="lds-ripple">
        <div></div>
        <div></div>
    </div>
</div>
<!-- End Preloader Area -->

<!-- Start Header Area -->
<header class="header-area">
    <!-- Start Top Header -->
    <div class="top-header">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6 col-md-6">
                    <ul class="header-left-content">
                        <li>
                            <span>Hot Line</span>
                            <a href="tel:+1-(514)-312-5678">+1 (514) 312-5678</a>
                        </li>
                    </ul>
                </div>

                <div class="col-lg-6 col-md-6">
                    <div class="header-right-content">
                        <ul class="language">
                            <li>
                                <div class="dropdown language-btn">
                                    <button class="dropdown-toggle" type="button" data-toggle="dropdown">
												<span>
													Language
													<i class="bx bx-chevron-down"></i>
												</span>
                                    </button>

                                    <div class="dropdown-menu">
                                        <a th:href="@{/onlinerecruitment/user/login(lang='en_US')}" class="dropdown-item">
                                            <img th:src="@{/images/language/english.png}" alt="Flag">
                                            <span>English</span>
                                        </a>

                                        <a href="#" class="dropdown-item">
                                            <img th:src="@{/images/language/arab.png}" alt="Flag">
                                            <span>العربيّة</span>
                                        </a>

                                        <a href="#" class="dropdown-item">
                                            <img th:src="@{/images/language/germany.png}" alt="Flag">
                                            <span>Germany</span>
                                        </a>

                                        <a href="#" class="dropdown-item">
                                            <img th:src="@{/images/language/portugues.png}" alt="Flag">
                                            <span>Português</span>
                                        </a>

                                        <a th:href="@{/onlinerecruitment/user/login(lang='zh_CN')}" class="dropdown-item">
                                            <img th:src="@{/images/language/china.png}" alt="Flag">
                                            <span>简体中文</span>
                                        </a>
                                    </div>
                                </div>
                            </li>
                        </ul>

                        <ul class="log-in">
                            <li>
                                <a th:href="log-in-register.html">
                                    <i class="bx bxs-lock"></i>
                                    Log In
                                </a>
                            </li>

                            <li>
                                <a th:href="log-in-register.html">
                                    <i class="bx bxs-user"></i>
                                    Register
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Start Top Header -->

    <!-- Start Navbar Area -->
    <div class="navbar-area">
        <div class="mobile-nav">
            <div class="container">
                <div class="mobile-menu">
                    <div class="logo">
                        <a th:href="index.html">
                            <img th:src="@{/images/logo.png}" alt="logo">
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="desktop-nav">
            <div class="container">
                <nav class="navbar navbar-expand-md navbar-light">
                    <a class="navbar-brand" th:href="index.html">
                        <img th:src="@{/images/logo.png}" alt="logo">
                    </a>

                    <div class="collapse navbar-collapse mean-menu">
                        <ul class="navbar-nav m-auto">
                            <li class="nav-item">
                                <a href="#" class="nav-link">
                                    Home
                                    <i class="bx bx-chevron-down"></i>
                                </a>

                                <ul class="dropdown-menu">
                                    <li class="nav-item">
                                        <a th:href="index.html" class="nav-link">Home One</a>
                                    </li>
                                    <li class="nav-item">
                                        <a th:href="index-2.html" class="nav-link">Home Two</a>
                                    </li>
                                    <li class="nav-item">
                                        <a th:href="index-3.html" class="nav-link">Home Three</a>
                                    </li>
                                </ul>
                            </li>

                            <li class="nav-item">
                                <a href="#" class="nav-link">
                                    Jobs
                                    <i class="bx bx-chevron-down"></i>
                                </a>

                                <ul class="dropdown-menu">
                                    <li class="nav-item">
                                        <a th:href="job-listing.html" class="nav-link">Job Listing</a>
                                    </li>
                                    <li class="nav-item">
                                        <a th:href="post-job.html" class="nav-link">Post A Job</a>
                                    </li>
                                    <li class="nav-item">
                                        <a th:href="job-details.html" class="nav-link">Job Details</a>
                                    </li>
                                </ul>
                            </li>

                            <li class="nav-item">
                                <a href="#" class="nav-link">
                                    Candidates
                                    <i class="bx bx-chevron-down"></i>
                                </a>

                                <ul class="dropdown-menu">
                                    <li class="nav-item">
                                        <a th:href="candidates-listing.html" class="nav-link">Candidates Listing</a>
                                    </li>
                                    <li class="nav-item">
                                        <a th:href="candidates-details.html" class="nav-link">Candidates Details</a>
                                    </li>

                                    <li class="nav-item">
                                        <a href="#" class="nav-link">
                                            Candidate Dashboard
                                            <i class="bx bx-chevron-down"></i>
                                        </a>

                                        <ul class="dropdown-menu">
                                            <li class="nav-item">
                                                <a th:href="dashboard.html" class="nav-link">Dashboard</a>
                                            </li>
                                            <li class="nav-item">
                                                <a th:href="profile.html" class="nav-link">Profile</a>
                                            </li>
                                            <li class="nav-item">
                                                <a th:href="resume.html" class="nav-link">Resume</a>
                                            </li>
                                            <li class="nav-item">
                                                <a th:href="bookmarks.html" class="nav-link">Bookmarks</a>
                                            </li>
                                            <li class="nav-item">
                                                <a th:href="applied-jobs.html" class="nav-link">Applied Jobs</a>
                                            </li>
                                            <li class="nav-item">
                                                <a th:href="alert-jobs.html" class="nav-link">Alert Jobs</a>
                                            </li>
                                            <li class="nav-item">
                                                <a th:href="message.html" class="nav-link">Message</a>
                                            </li>
                                            <li class="nav-item">
                                                <a th:href="change-password.html" class="nav-link">Change Password</a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>

                            <li class="nav-item">
                                <a href="#" class="nav-link">
                                    Employers
                                    <i class="bx bx-chevron-down"></i>
                                </a>

                                <ul class="dropdown-menu">
                                    <li class="nav-item">
                                        <a th:href="employers-listing.html" class="nav-link">Employers Listing</a>
                                    </li>
                                    <li class="nav-item">
                                        <a th:href="employers-details.html" class="nav-link">Employers Details</a>
                                    </li>
                                </ul>
                            </li>

                            <li class="nav-item">
                                <a href="#" class="nav-link active">
                                    Pages
                                    <i class="bx bx-chevron-down"></i>
                                </a>

                                <ul class="dropdown-menu">
                                    <li class="nav-item">
                                        <a th:href="about-us.html" class="nav-link">About Us</a>
                                    </li>
                                    <li class="nav-item">
                                        <a th:href="pricing.html" class="nav-link">Pricing</a>
                                    </li>
                                    <li class="nav-item">
                                        <a th:href="faq.html" class="nav-link">FAQ</a>
                                    </li>

                                    <li class="nav-item">
                                        <a href="#" class="nav-link">
                                            Blog
                                            <i class="bx bx-chevron-down"></i>
                                        </a>

                                        <ul class="dropdown-menu">
                                            <li class="nav-item">
                                                <a th:href="blog.html" class="nav-link">Blog</a>
                                            </li>
                                            <li class="nav-item">
                                                <a th:href="blog-details.html" class="nav-link">Blog Details</a>
                                            </li>
                                        </ul>
                                    </li>

                                    <li class="nav-item">
                                        <a th:href="contact-us.html" class="nav-link">Contact Us</a>
                                    </li>
                                    <li class="nav-item">
                                        <a th:href="terms-conditions.html" class="nav-link">Terms & Conditions</a>
                                    </li>
                                    <li class="nav-item">
                                        <a th:href="privacy-policy.html" class="nav-link">Privacy Policy</a>
                                    </li>
                                    <li class="nav-item">
                                        <a th:href="log-in-register.html" class="nav-link active">Log In / Register</a>
                                    </li>
                                    <li class="nav-item">
                                        <a th:href="freelancer.html" class="nav-link">Freelancer</a>
                                    </li>
                                    <li class="nav-item">
                                        <a th:href="testimonials.html" class="nav-link">Testimonials</a>
                                    </li>
                                    <li class="nav-item">
                                        <a th:href="coming-soon.html" class="nav-link">Coming Soon</a>
                                    </li>
                                    <li class="nav-item">
                                        <a th:href="404.html" class="nav-link">404 Error Page</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>

                        <div class="others-option">
                            <div class="get-quote">
                                <a th:href="post-job.html" class="default-btn">
                                    Post a Job
                                </a>
                            </div>
                        </div>
                    </div>
                </nav>
            </div>
        </div>

        <div class="others-option-for-responsive">
            <div class="container">
                <div class="dot-menu">
                    <div class="inner">
                        <div class="circle circle-one"></div>
                        <div class="circle circle-two"></div>
                        <div class="circle circle-three"></div>
                    </div>
                </div>

                <div class="container">
                    <div class="option-inner">
                        <div class="others-option justify-content-center d-flex align-items-center">
                            <div class="get-quote">
                                <a th:href="post-job.html" class="default-btn">
                                    Post a Job
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End Navbar Area -->
</header>
<!-- End Header Area -->

<!-- Start Page Title Area -->
<div class="page-title-area">
    <div class="container">
        <div class="page-title-content">
            <h2 th:text="#{register.register}">Register</h2>
            <ul>
                <li>
                    <a th:href="index.html" th:text="#{register.home}">
                        Home
                    </a>
                </li>
                <li class="active" th:text="#{register.register}">Register</li>
            </ul>
        </div>
    </div>
</div>
<!-- End Page Title Area -->

<!-- Start User Area -->
<section class="user-area ptb-100">
    <div class="container">
        <div class="row">
            <div class="col-lg-3"></div>
            <div class="col-lg-6">
                <div class="user-form-content">
                    <h3 th:text="#{register.create}">Create an Account</h3>

                    <form class="user-form">
                        <div class="row">
                            <div class="col-12">
                                <div class="form-group">
                                    <label>Name</label>
                                    <input class="form-control" type="text" name="name">
                                </div>
                            </div>

                            <div class="col-12">
                                <div class="form-group">
                                    <label>Email</label>
                                    <input class="form-control" type="email" name="email">
                                </div>
                            </div>

                            <div class="col-12">
                                <div class="form-group">
                                    <label>Password</label>
                                    <input class="form-control" type="password" name="password">
                                </div>
                            </div>

                            <div class="col-12">
                                <div class="form-group">
                                    <label>Repeat Password</label>
                                    <input class="form-control" type="password" name="repeat-password">
                                </div>
                            </div>

                            <div class="col-12">
                                <button class="default-btn register" type="submit">
                                    Register Now
                                </button>
                            </div>

                            <div class="col-12">
                                <p class="create">Already Have an Account? <a href="#">Log In</a></p>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- End User Area -->

<!-- Start Subscribe Area -->
<section class="subscribe-area subscribe-area-about-page">
    <div class="container">
        <div class="subscribe-bg">
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <div class="subscribe-content">
                        <h2>Find Your Next Great Job Opportunity!</h2>
                    </div>
                </div>

                <div class="col-lg-6">
                    <form class="newsletter-form" data-toggle="validator">
                        <input type="email" class="form-control" placeholder="Enter email address" name="EMAIL" required
                               autocomplete="off">

                        <button class="default-btn" type="submit">
                            <span>Subscribe</span>
                        </button>

                        <div id="validator-newsletter" class="form-result"></div>
                        <p>Join The Newsletter 10,000 Users Already!</p>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- End Subscribe Area -->

<!-- Start Footer Area -->
<footer class="footer-area pt-100 pb-70">
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-6">
                <div class="single-footer-widget single-bg">
                    <a th:href="index.html" class="logo">
                        <img th:src="@{/images/logo.png}" alt="Image">
                    </a>

                    <p>Lorem ipsum dolor sit amet, consec tetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua consec tetur.</p>

                    <ul class="social-icon">
                        <li>
                            <a href="#">
                                <i class="bx bxl-facebook"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="bx bxl-instagram"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="bx bxl-linkedin-square"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="bx bxl-twitter"></i>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="col-lg-3 col-md-6">
                <div class="single-footer-widget">
                    <h3>Contact</h3>

                    <ul class="address">
                        <li>
                            <i class="bx bx-phone-call"></i>
                            <span>Phone:</span>
                            <a href="tel:+1-(514)-7939-357">+1 (514) 7939-357</a>
                        </li>
                        <li>
                            <i class="bx bx-envelope"></i>
                            <span>Email:</span>
                            <a href="mailto:hello@jubi.com">hello@jubi.com</a>
                        </li>
                        <li class="location">
                            <i class="bx bx-location-plus"></i>
                            <span>Address:</span>
                            6890 Blvd, The Bronx, NY 1058 New York, USA
                        </li>
                    </ul>
                </div>
            </div>

            <div class="col-lg-3 col-md-6">
                <div class="single-footer-widget">
                    <h3>Helpful Resources</h3>

                    <ul class="import-link">
                        <li>
                            <a href="#">Create Account</a>
                        </li>
                        <li>
                            <a href="#">Contact Us</a>
                        </li>
                        <li>
                            <a href="#">Site Map</a>
                        </li>
                        <li>
                            <a href="#">Terms of Use</a>
                        </li>
                        <li>
                            <a href="#">Privacy Centre</a>
                        </li>
                        <li>
                            <a href="#">Blog</a>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="col-lg-3 col-md-6">
                <div class="single-footer-widget">
                    <h3>Job Seekers</h3>

                    <ul class="import-link">
                        <li>
                            <a href="#">Create Account</a>
                        </li>
                        <li>
                            <a href="#">Browse Jobs</a>
                        </li>
                        <li>
                            <a href="#">Upload CV</a>
                        </li>
                        <li>
                            <a href="#">Company Profile</a>
                        </li>
                        <li>
                            <a href="#">International Jobs</a>
                        </li>
                        <li>
                            <a href="#">FAQ</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</footer>
<!-- End Footer Area -->

<!-- Start Copy Right Area -->
<div class="copy-right-area">
    <div class="container">
        <p>
            © 2020 Jubi Is Proudly Created By
            <a href="#">EnvyTheme</a>
        </p>
    </div>
</div>
<!-- End Copy Right Area -->

<!-- Start Go Top Area -->
<div class="go-top">
    <i class="bx bx-chevrons-up"></i>
    <i class="bx bx-chevrons-up"></i>
</div>
<!-- End Go Top Area -->


<!-- Jquery Min JS -->
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<!-- Popper Min JS -->
<script th:src="@{/js/popper.min.js}"></script>
<!-- Bootstrap Min JS -->
<script src="https://www.jq22.com/jquery/bootstrap-4.2.1.js"></script>
<!-- Meanmenu Min JS -->
<script th:src="@{/js/meanmenu.min.js}"></script>
<!-- Wow Min JS -->
<script th:src="@{/js/wow.min.js}"></script>
<!-- Owl Carousel Min JS -->
<script th:src="@{/js/owl.carousel.min.js}"></script>
<!-- Nice Select Min JS -->
<script th:src="@{/js/nice-select.min.js}"></script>
<!-- Magnific Popup Min JS -->
<script th:src="@{/js/magnific-popup.min.js}"></script>
<!-- Mixitup JS -->
<script th:src="@{/js/jquery.mixitup.min.js}"></script>
<!-- Appear Min JS -->
<script th:src="@{/js/appear.min.js}"></script>
<!-- Odometer Min JS -->
<script th:src="@{/js/odometer.min.js}"></script>
<!-- Range Slider Min JS -->
<script th:src="@{/js/range-slider.min.js}"></script>
<!-- Datepicker Min JS -->
<script th:src="@{/js/bootstrap-datepicker.min.js}"></script>
<!-- Form Validator Min JS -->
<script th:src="@{/js/form-validator.min.js}"></script>
<!-- Contact JS -->
<script th:src="@{/js/contact-form-script.js}"></script>
<!-- Ajaxchimp Min JS -->
<script th:src="@{/js/ajaxchimp.min.js}"></script>
<!-- Custom JS -->
<script th:src="@{/js/custom.js}"></script>
</body>
</html>